@charset "utf-8";
@import url('./common.less');

@import url('./header.less');

@import url('./footer.less');

nav {
	position: absolute;
	top: 0px;
	z-index: 10;
	background-color: #fff;
}

.container {
	width: 1200px;
	margin: 0 auto;
}

.s1 {
	padding-top: 88px;

	.s1-left {
		padding-top: 60px;
		margin-left: 40px;
		width: 560px;
		float: left;

		.s1-img {
			width: 560px;
			height: 560px;
			overflow: hidden;
			position: relative;

			.s1-img-box {
				position: absolute;
				width: 7000px;

				>img {
					float: left;
					width: 560px;
					height: 560px;
				}
			}
		}

		.s1-btn1 {
			margin-top: 40px;
			height: 80px;
			display: flex;
			justify-content: center;

			>img {
				width: 80px;
				float: left;
				margin: 0 15px;
				opacity: 0.6;
				transition: all .5s;

				&:hover {
					opacity: 1;
				}
			}

			.checked {
				opacity: 1;
			}
		}
	}

	.s1-right {
		float: left;
		width: 492px;
		padding: 80px 40px 0 68px;

		.s1-r-h3 {
			font-size: 22px;
			font-weight: bold;
			color: #333;
			line-height: 44px;
		}

		.s1-r-p1 {
			font-size: 14px;
			color: #666;
			line-height: 24px;


			span {
				color: #f79a47;
				font-weight: bold;
			}
		}

		.s1-r-link {
			font-size: 14px;
			line-height: 24px;
			font-weight: bold;
			color: #f79a47;
			display: block;
			margin-bottom: 12px;
			text-decoration: underline;
		}

		.s1-price {
			margin-bottom: 20px;
			line-height: 30px;
			font-weight: bold;
		}

		.s1-newPrice {
			font-size: 26px;
			color: #333;
		}

		.s1-oldPrice {
			font-size: 21px;
			color: #a0a0a0;
			text-decoration: line-through;
		}

		.s1-surport {
			font-size: 14px;
			color: #333;
			padding-bottom: 30px;
			border-bottom: 1px solid #ededed;

			>span {
				span {
					padding-left: 18px;
					background: url(../images/details/huabei.png) no-repeat;
				}
			}

			>a {
				color: #333;
				margin-left: 10px;

				span {
					padding-left: 18px;
					background: url(../images/details/yjhx.png) no-repeat 0 center;
				}
			}
		}
	}
}

.s1-r-config {
	.config-tit {
		margin-top: 30px;
		margin-bottom: 20px;
		font-size: 14px;
		color: #666;
		line-height: 14px;
	}

	.config-list {
		margin: -10px;

		.list-checked {
			border: 1px solid #81cdb1;
		}

		li {
			float: left;
			margin: 10px;
			box-sizing: border-box;
			border-radius: 4px;
			border: 1px solid #dce1e4;

			&:hover {
				border: 1px solid #81cdb1;
			}

			a {
				display: block;
				box-sizing: border-box;
				width: 234px;
				height: 42px;
				color: #333;
				font-size: 16px;
				font-weight: bold;
				border-radius: 4px;
				line-height: 42px;
				text-align: center;
				transition: all .3s;

				span {
					padding-left: 16px;
				}


				.config-service {
					padding-left: 22px;
					background: url(../images/details/fuwu.png) no-repeat right center;
				}

			}
		}
	}

	.config-jjg {
		position: relative;

		.sheng {
			position: absolute;
			right: 0;
			top: 0;
			font-size: 14px;
			color: #f79a47;
			font-weight: bold;
			display: none;

			span {
				font-size: 10px;
				padding: 0 2px;
				border: 1px solid #f79a47;
				border-radius: 4px;
				background-color: #fef5ec;
			}
		}
	}

	.config-jjg-list {
		background-color: #fcfcfc;
		width: 440px;
		// height: 177px;
		padding: 0 26px;
		position: relative;

		.control-l {
			position: absolute;
			width: 12px;
			height: 20px;
			background: url(../images/details/jiantou_left.png) no-repeat;
			left: 10px;
			top: 50px;
			cursor: pointer;
		}

		.control-r {
			position: absolute;
			width: 12px;
			height: 20px;
			background: url(../images/details/jiantou_right_jihuo.png) no-repeat;
			right: 10px;
			top: 50px;
			cursor: pointer;
		}

		.jjg-pro {
			width: 440px;
			height: 177px;
			overflow: hidden;
			position: relative;
		}

		ul {
			width: 1500px;
			position: absolute;

			li {
				float: left;

				a {
					display: block;
					width: 110px;

					&:first-child {
						margin-top: 26px;
						margin-bottom: 16px;
					}

					&:last-child {
						text-align: center;
						margin-bottom: 30px;
					}

					img {
						width: 66px;
						height: 66px;
						margin: 0 auto;
					}



					input {
						vertical-align: middle;
						width: 15px;
						height: 15px;
						border: 1px solid #dce1e4;
						border-radius: 50%;
					}

					.jjg-newPrice {
						font-size: 12px;
						line-height: 15px;
						color: #333;
					}

					.jjg-oldPrice {
						font-size: 12px;
						line-height: 15px;
						color: #b7b7b7;
						text-decoration: line-through;
					}
				}

				p {
					font-size: 12px;
					line-height: 12px;
					color: #999;
					text-align: center;
					padding: 0 12px;
					margin-bottom: 8px;
					text-overflow: ellipsis;
					word-wrap: break-word;
				}
			}
		}
	}
}

.config-num {
	width: 492px;
	padding-bottom: 30px;
	border-bottom: 1px solid #ededed;

	.num-control {
		width: 196px;
		height: 44px;
		border: 1px solid #dce1e4;
		border-radius: 4px;

		div {
			float: left;
			width: 70px;
			height: 44px;
			position: relative;

			&:not(:nth-child(2)) {
				cursor: pointer;
			}

			&:nth-child(1)::after {
				content: '';
				position: absolute;
				display: inline-block;
				width: 12px;
				height: 2px;
				background: #666;
				left: 50%;
				margin-left: -6px;
				top: 50%;
				margin-top: -1px;
				transition: background-color 0.35s ease;
			}

			&:nth-child(2) {
				text-align: center;
				color: #333;
				font-size: 14px;
				line-height: 44px;
				font-weight: normal;
				width: 54px;
			}

			&:nth-child(3)::before {
				content: '';
				position: absolute;
				display: inline-block;
				width: 2px;
				height: 12px;
				background: #666;
				left: 50%;
				margin-left: -1px;
				top: 50%;
				margin-top: -6px;
				transition: background-color 0.35s ease;
			}

			&:nth-child(3)::after {
				content: '';
				position: absolute;
				display: inline-block;
				width: 12px;
				height: 2px;
				background: #666;
				left: 50%;
				margin-left: -6px;
				top: 50%;
				margin-top: -1px;
				transition: background-color 0.35s ease;
			}

		}

		#disable {
			cursor: not-allowed;
		}

		#disable::before,
		#disable::after {
			background: #b7b7b7;
		}
	}
}

.s1-btn {
	padding: 50px 0;

	a {
		display: block;
		float: left;
		font-size: 16px;
		font-weight: bold;
		width: 196px;
		height: 60px;
		border-radius: 4px;
		line-height: 60px;
		text-align: center;
		color: #666;
		background-color: #f4f4f4;
		transition: all .3s;

		&:hover {
			background-color: #E3E3E3;
		}

		&:last-child {
			margin-left: 40px;
			color: #fff;
			background-color: #F34141;

		}

		&:last-child:hover {
			background-color: #FB6332;
		}
	}
}

.s2 {
	padding-top: 40px;
	padding-bottom: 94px;
	background-color: #f5f5f5;

	.s2-img {
		width: 1156px;
		margin: 0 auto;
		padding: 30px 22px;
		background-color: #fff;
		overflow: hidden;

		img {
			width: 100%;
		}
	}
}

.aside {
	position: fixed;
	right: 0;
	bottom: 2vh;
	z-index: 9999;

	a {
		display: block;
		width: 80px;
		height: 80px;
		text-align: center;
		font-size: 14px;
		color: #333;
		margin: 4px;
		background-color: #fff;
		transition: background-color .3s;
		box-shadow: 0px 0px 18px 0px rgb(0 0 0 / 14%);

		div {
			width: 50px;
			height: 50px;
			margin: 6px auto 0;
		}

		p {
			opacity: 0.85;
		}

		&:hover {
			background-color: #f34141;
			color: #fff;
		}

		.aside-pf {
			background: url(../images/details/pingfen.svg) no-repeat center center;
			background-size: contain;
		}

		&:hover .aside-pf {
			background: url(../images/details/pingfen_hover.svg) no-repeat center center;
			background-size: contain;
		}

		.aside-kf {
			background: url(../images/details/kefu.svg) no-repeat center center;
			background-size: contain;
		}

		&:hover .aside-kf {
			background: url(../images/details/kefu_hover.svg) no-repeat center center;
			background-size: contain;
		}

		.aside-top {
			background: url(../images/details/dingbu.svg) no-repeat center center;
			background-size: contain;
		}

		&:hover .aside-top {
			background: url(../images/details/dingbu_hover.svg) no-repeat center center;
			background-size: contain;
		}
	}
}